<template>
  <div class="newposRight">
    <div class="flexb">
      <span class="color333">{{ $t('newpos.revenueTrends') }}</span>
      <div class="flex">
        <span class="color333" style="font-size: 14px">{{ $t('newpos.annualYield') }}：</span>
        <span class="goldColor" style="font-size: 20px">{{detInfo.maxAnnualizedRate || '0.00'}}%</span>
      </div>
    </div>
    <div class="newposChart" id="newposChart"></div>
  </div>
</template>

<script>
import moment from 'moment';
import newpostChart from './newposChart';

export default {
  name: 'newposRight', // 收益趋势
  data() {
    return {
      data: [],
      theme: 'white'
    }
  },
  components: {},
  props: {
    detInfo: Object
  },
  watch: {
    '$store.state.app.theme': function change(value) {
      this.theme = value === 'theme-278EDA' ? 'white' : 'black';
      this.handleGetIncomeTrendList();
    },
    '$store.state.app.language': function change() {
      this.handleGetIncomeTrendList();
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.theme = this.$store.state.app.theme === 'theme-278EDA' ? 'white' : 'black';
    this.handleGetIncomeTrendList();
  },
  beforeDestroy() {},
  methods: {
    // 获取收益趋势
    handleGetIncomeTrendList() {
      this.$http.post('/pool/getIncomeTrendList').then((res) => {
        if (res.code !== 0) return;
        const items = res.incomeTrendList;
        const getItems = [];
        items.forEach((e) => {
          let date = moment(Number(e.incomeDate)).format('YYYY-MM-DD');
          date = date.split('-');
          date = Date.UTC(date[0], date[1] - 1, date[2])
          getItems.push([date, Number(e.annualizedRate)])
        });
        this.data = getItems;
        const params = {
          self: this,
          data: this.data,
          theme: this.theme,
        }
        newpostChart.init(params);
      });
    },
  },
}
</script>
<style lang="scss" scoped>
.goldColor {
  color: #F5A623 !important;
  font-size: 22px;
}

.newposChart {
  min-height: 400px;
  margin-top: 25px;
}

.color333 {
  font-size: 16px;
  color: #333;
}

.newposRight{
  font-size: 16px;
  padding: 30px 20px;
}

.theme-1B1D27 {
  .color333 {
    color: #fff !important;
  }

  .goldColor {
    color: #FFC78A !important;
  }
}
</style>
